<template>
	<div class="body-sd">
		<HeaDer></HeaDer>
		<div class="banner-sd">
			<img :src="require('../../assets/images/pt-banner_02.jpg')" alt="">
			<span>平台功能介绍</span>
		</div>
		<div class="container-sd">
			<el-tabs v-model="activeName" @tab-click="handleClick">
			   <el-tab-pane label="企业管理" name="first">
					<div class="ceng1-qy">
						<div class="title">基本信息管理</div>
						<div class="content-qy">
							<img :src="require('../../assets/images/qy-img_03.png')" alt="">
							<div>
								<p>高速稳定，全网通优质体验</p>
								<span>支持4G（FDD LTE 、TDD-LTE)、EVDO、WCDMA、向下兼容HSUPA、EVDO、GPRS，同时可选支持5G网络，真正全网通，满足不同场景下用网需求</span>
								<p>支持APN/VPDN专网接入，为安全产业保驾护航</p>
								<span>支持4G（FDD LTE 、TDD-LTE)、EVDO、WCDMA、向下兼容HSUPA、EVDO、GPRS，同时可选支持5G网络，真正全网通，满足不同场景下用网需求</span>
								<p>支持多网同时在线，双卡、有线/无线互为备份</p>
								<span>支持4G（FDD LTE 、TDD-LTE)、EVDO、WCDMA、向下兼容HSUPA、EVDO、GPRS，同时可选支持5G网络，真正全网通，满足不同场景下用网需求</span>
							</div>
						</div>
					</div>
					<div class="ceng2-qy">
						<div class="title">资质荣誉管理</div>
						<div class="content-qy">
							<div>
								<p>基本信息管理，即使是非计算机编程专业出身的业务顾问，也能使用Logwire快速、方便地构建稳定、高效的应用。企业管理信息系统开发平台，即使是非计算机编程专业出身的业务顾问，</p>
								<p>也能使用Logwire</p>
								<p>快速、方便地构建稳定、高效的应用。</p>
							</div>
							<img :src="require('../../assets/images/qy-img_07.png')" alt="">
						</div>
					</div>
					<div class="ceng3-qy">
						<div class="title">项目管理</div>
						<div class="content-qy">
							<img :src="require('../../assets/images/qy-img_11.png')" alt="">
							<div>
								<p>基本信息管理，即使是非计算机编程专业出身的业务顾问，也能使用Logwire快速、方便地构建稳定、高效的应用。企业管理信息系统开发平台，即使是非计算机编程专业出身的业务顾问，</p>
								<p>也能使用Logwire</p>
								<p>快速、方便地构建稳定、高效的应用。</p>
							</div>
						</div>
					</div>
					<div class="ceng4-qy">
						<div class="title">文控中心</div>
						<div class="content-qy">
							<div>
								<p>基本信息管理，即使是非计算机编程专业出身的业务顾问，也能使用Logwire快速、方便地构建稳定、高效的应用。企业管理信息系统开发平台，即使是非计算机编程专业出身的业务顾问，</p>
								<p>也能使用Logwire</p>
								<p>快速、方便地构建稳定、高效的应用。</p>
							</div>
							<img :src="require('../../assets/images/qy-img_15.png')" alt="">
						</div>
					</div>
				</el-tab-pane>
			   <el-tab-pane label="机构管理" name="second">
				   <div class="ceng1-jg">
					   <div class="title-jg">
						   销售管理
					   </div>
					   <div class="content-jg">
						   <img :src="require('../../assets/images/jg-img_03.png')" alt="">
						   <div class="txts-jg">
							   <p>专业产品及优化升级全周期服务解决方案</p>
							   <span>单位内部各个科室的业务办理、业务审批，日常各个行政管理。功能主要围绕协同办公、会议管理、人事管理、合同管理、物品申领管</span>
							   <ul>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
							   </ul>
						   </div>
					   </div>
				   </div>
				   <div class="ceng2-jg">
					   <div class="title-jg">
						   项目管理
					   </div>
					   <div class="content-jg">
							<div class="txts-jg">
							   <p>专业产品及优化升级全周期服务解决方案</p>
							   <span>单位内部各个科室的业务办理、业务审批，日常各个行政管理。功能主要围绕协同办公、会议管理、人事管理、合同管理、物品申领管</span>
							   <ul>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
							   </ul>
						   </div>
							<img :src="require('../../assets/images/jg-img_11.png')" alt="">
					   </div>
				   </div>
				   <div class="ceng3-jg">
					   <div class="title-jg">
						   客户管理
					   </div>
					   <div class="content-jg">
							<img :src="require('../../assets/images/jg-img_15.png')" alt="">
							<div class="txts-jg">
							   <p>专业产品及优化升级全周期服务解决方案</p>
							   <span>单位内部各个科室的业务办理、业务审批，日常各个行政管理。功能主要围绕协同办公、会议管理、人事管理、合同管理、物品申领管</span>
							   <ul>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
							   </ul>
						   </div>

					   </div>
				   </div>
				   <div class="ceng4-jg">
					   <div class="title-jg">
						   成本管理
					   </div>
					   <div class="content-jg">
							<div class="txts-jg">
							   <p>专业产品及优化升级全周期服务解决方案</p>
							   <span>单位内部各个科室的业务办理、业务审批，日常各个行政管理。功能主要围绕协同办公、会议管理、人事管理、合同管理、物品申领管</span>
							   <ul>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
							   </ul>
						   </div>
							<img :src="require('../../assets/images/jg-img_19.png')" alt="">
					   </div>
				   </div>

			   </el-tab-pane>
			   <el-tab-pane label="平台管理" name="third">
				   <div class="ceng1-pt">
					   <div class="title-pt">
						   政策推送
					   </div>
					   <div class="content-pt">
						   <img :src="require('../../assets/images/pt-img_03.png')" alt="">
						   <div class="txts-pt">
							   <p>专业产品及优化升级全周期服务解决方案</p>
							   <span>单位内部各个科室的业务办理、业务审批，日常各个行政管理。功能主要围绕协同办公、会议管理、人事管理、合同管理、物品申领管</span>
							   <ul>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
							   </ul>
						   </div>
					   </div>
				   </div>
				   <div class="ceng2-pt">
					   <div class="title-pt">
						   培训活动
					   </div>
					   <div class="content-pt">
						   <div class="txts-pt">
							   <p>专业产品及优化升级全周期服务解决方案</p>
							   <span>单位内部各个科室的业务办理、业务审批，日常各个行政管理。功能主要围绕协同办公、会议管理、人事管理、合同管理、物品申领管</span>
							   <ul>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
							   </ul>
						   </div>
						   <img :src="require('../../assets/images/pt-img_07.png')" alt="">
					   </div>
				   </div>
				   <div class="ceng3-pt">
					   <div class="title-pt">
						   需求对接
					   </div>
					   <div class="content-pt">
						   <img :src="require('../../assets/images/pt-img_11.png')" alt="">
						   <div class="txts-pt">
							   <p>专业产品及优化升级全周期服务解决方案</p>
							   <span>单位内部各个科室的业务办理、业务审批，日常各个行政管理。功能主要围绕协同办公、会议管理、人事管理、合同管理、物品申领管</span>
							   <ul>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
							   </ul>
						   </div>
					   </div>
				   </div>
				   <div class="ceng4-pt">
					   <div class="title-pt">
						   调研问卷
					   </div>
					   <div class="content-pt">
							<div class="txts-pt">
							   <p>专业产品及优化升级全周期服务解决方案</p>
							   <span>单位内部各个科室的业务办理、业务审批，日常各个行政管理。功能主要围绕协同办公、会议管理、人事管理、合同管理、物品申领管</span>
							   <ul>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>稳定易操作</span>
								   </li>
								   <li>
									   <img :src="require('../../assets/images/jg-img_06.png')" alt="">
									   <span>实时协同白板</span>
								   </li>
							   </ul>
						   </div>
							<img :src="require('../../assets/images/pt-img_15.png')" alt="">
					   </div>
				   </div>
			   </el-tab-pane>
			 </el-tabs>
		</div>



		<FooTer></FooTer>
	</div>
</template>

<script>
import HeaDer from '../../components/HomePage/header'
import FooTer from '../../components/HomePage/footer'
export default {
	data() {
		return{
			activeName: 'first'
		}
	},
  created() {
    // 获取查询参数
    this.activeName = this.$route.query.activeName;
    if (this.activeName === undefined){
      this.activeName = 'first';
    }
  },
  methods:{
		handleClick(tab, event) {
        console.log(tab, event);
      }

	},
	components: {
		HeaDer,
		FooTer
	},
}
</script>

<style scoped>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote，th,
td {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}
.body-sd{
	height: 100%;
	width:100%;
	font-size: 16rem;
	font-family:PingFang SC,Microsoft YaHei,Arial, sans-serif;
	color: #384a66;
}
.banner-sd{
	width: 100%;
	height: 280rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}
.banner-sd>img{
	width: 100%;
	height: 100%;
	position: relative;
}
.banner-sd>span{
	position: absolute;
	left: 220rem;
	color: white;
	font-size: 48rem;
	font-weight: bold;
}
::v-deep .container-sd .el-tabs__nav-scroll{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
}
::v-deep .container-sd .el-tabs__nav-wrap::after{
	height: 1px;
}
::v-deep .container-sd .el-tabs__header{
	box-shadow: 0 5rem 5rem rgba(0, 0, 0, .05);
}
::v-deep .container-sd .el-tabs__item{
	padding: 0 105rem;
}
::v-deep .container-sd .el-tabs__item.is-active {
    color: #299d60;
}
::v-deep .container-sd .el-tabs__active-bar{
	background-color: #299d60;
}
::v-deep .el-tabs__item:hover {
    color: #299d60;
}
::v-deep .el-tabs__item {
    font-size: 20rem;
	font-weight: bold;
	color: #384a66;
}
.tabs-qy{
	width: 100%;
	height: 60rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 5rem 5rem rgba(0, 0, 0, .05);
}
.tabs-qy>li{
	font-size: 20rem;
	font-weight: bold;
	margin-right: 226rem;
	color: #384a66;
	padding-bottom: 14rem;
	margin-top: 14rem;
	cursor: pointer;
}
.tabs-qy>li:last-child{
	margin-right: 0;
}
.tabs-qy>li.on{
	border-bottom: solid 2px #299d60;
	color: #299d60;
}
.title{
	font-size: 30rem;
	font-weight: bold;
	color: #333;
	text-align: center;
	padding-top: 80rem;
	padding-bottom: 90rem;
}
.ceng1-qy{
	width: 100%;
	padding-bottom: 70rem;
}
.ceng1-qy>.content-qy{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ceng1-qy p{
	font-size: 22rem;
	width: 740rem;
	line-height: 80rem;
	color: #545454;
}
.ceng1-qy span{
	font-size: 16rem;
	width: 740rem;
	display: inline-block;
	line-height: 40rem;
}
.ceng1-qy>.content-qy>img{
	width: 756rem;
	height: 394rem;
	margin-right: 32rem;
}

.ceng2-qy{
	width: 100%;
	background-color:#f5f7fa;
	padding-bottom: 70rem;
}
.ceng2-qy>.content-qy{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ceng2-qy p{
	font-size: 22rem;
	width: 668rem;
	line-height: 40rem;
}
.ceng2-qy>.content-qy>img{
	width: 695rem;
	height: 457rem;
	margin-left: 132rem;
}
.ceng3-qy{
	width: 100%;
	padding-bottom: 70rem;
}
.ceng3-qy>.content-qy{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ceng3-qy p{
	font-size: 22rem;
	width: 668rem;
	line-height: 40rem;
}
.ceng3-qy>.content-qy>img{
	width: 696rem;
	height: 457rem;
	margin-right:68rem;
}

.ceng4-qy{
	width: 100%;
	padding-bottom: 70rem;
	background-color: #f5f7fa;
}
.ceng4-qy>.content-qy{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ceng4-qy p{
	font-size: 22rem;
	width: 668rem;
	line-height: 40rem;
}
.ceng4-qy>.content-qy>img{
	width: 756rem;
	height: 393rem;
	margin-left:96rem;
}
::v-deep .container-sd .el-tabs__header {
    margin: 0 0 0;
}
.title-jg{
	font-size: 30rem;
	font-weight: bold;
	color: #333;
	text-align: center;
	padding-top: 85rem;
	padding-bottom: 80rem;
}
.ceng1-jg{
	padding-bottom: 72rem;
	width: 100%;
	background-image: linear-gradient(to bottom,#ecf2f9,#f0faf8);
}
.content-jg{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ceng1-jg >.content-jg>img{
	width: 673rem;
	height: 382rem;
	margin-right: 98rem;
}
.txts-jg{
	width: 700rem;
}
.txts-jg>p{
	font-size: 24rem;
	color: #252424;
	font-weight: bold;
	line-height: 75rem;
}
.txts-jg>span{
	color: #8b8b8b;
	line-height: 36rem;
	margin-bottom: 8rem;
	display: inline-block;
}
.txts-jg>ul{
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}
.txts-jg>ul>li{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 172rem;
	margin-top: 18rem;
}
.txts-jg>ul>li>img{
	width: 20rem;
	height: 20rem;
	margin-right: 15rem;
}
.ceng2-jg{
	padding-bottom: 72rem;
	width: 100%;
	background-image: linear-gradient(to bottom,#ecf2f9,#f0faf8);
}
.ceng2-jg >.content-jg>img{
	width: 671rem;
	height: 380rem;
	margin-left: 104rem;
}
.ceng3-jg{
	padding-bottom: 72rem;
	width: 100%;
	background-image: linear-gradient(to bottom,#ecf2f9,#f0faf8);
}
.ceng3-jg >.content-jg>img{
	width: 673rem;
	height: 382rem;
	margin-right: 114rem;
}
.ceng4-jg{
	padding-bottom: 72rem;
	width: 100%;
	background-image: linear-gradient(to bottom,#ecf2f9,#f0faf8);
}
.ceng4-jg >.content-jg>img{
	width: 702rem;
	height: 372rem;
	margin-left: 88rem;
}
.title-pt{
	font-size: 30rem;
	font-weight: bold;
	color: #333;
	text-align: center;
	padding-top: 75rem;
	padding-bottom:130rem;
}
.txts-pt{
	width: 700rem;
}
.txts-pt>p{
	font-size: 24rem;
	color: #252424;
	font-weight: bold;
	line-height: 75rem;
}
.txts-pt>span{
	color: #8b8b8b;
	line-height: 36rem;
	margin-bottom: 8rem;
	display: inline-block;
}
.txts-pt>ul{
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}
.txts-pt>ul>li{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 172rem;
	margin-top: 18rem;
}
.txts-pt>ul>li>img{
	width: 20rem;
	height: 20rem;
	margin-right: 15rem;
}
.content-pt{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ceng1-pt{
	padding-bottom:185rem;
	width: 100%;
}
.ceng1-pt >.content-pt>img{
	width: 660rem;
	height:208rem;
	margin-right:112rem;
}
.ceng2-pt{
	padding-bottom:114rem;
	width: 100%;
	background-color: #f5f7fa;
}
.ceng2-pt >.content-pt>img{
	width: 635rem;
	height:308rem;
	margin-left:162rem;
}
.ceng3-pt{
	padding-bottom:144rem;
	width: 100%;
	/* background-color: #f5f7fa; */
}
.ceng3-pt >.content-pt>img{
	width: 662rem;
	height:328rem;
	margin-right:102rem;
}
.ceng4-pt{
	padding-bottom:108rem;
	width: 100%;
	background-color: #f5f7fa;
}
.ceng4-pt >.content-pt>img{
	width:526rem;
	height:310rem;
	margin-left:224rem;
}
</style>
